<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:framework="http://java.sun.com/jsf/composite/components">
<h:head>

	<title><h:outputText value="#{msg['security']['register']}" /></title>
	<h:outputStylesheet library="assets" name="css/login.css" />
	<h:outputScript library="assets" name="js/login.js" />
</h:head>

<h:body styleClass="login-body">
	<div class="login-image">
		<div class="card login-panel ui-fluid">
			<h:form id="register">
				<p:messages id="msg" style="margin:0px" />
				<div class="login-panel-content">
					<p:outputPanel id="register_plane" styleClass="ui-g"
						rendered="#{viewScope.user !=null and viewScope.user.id == null}">
						<div class="ui-g-12 ui-sm-6 ui-md-6" style="text-align: left;">
							<i class="fa fa-fw fa-user-plus logo"></i>
						</div>
						<div class="ui-g-12 ui-sm-6 ui-md-6" style="text-align: right;">
							<h2 class="welcome-text">Join MyZone</h2>
							<span class="guest-sign-in">Create your account</span>
						</div>
						<div class="ui-g-12" style="text-align: left;">
							<span class="md-inputfield"> <p:inputText id="username"
									required="true" label="username"
									value="#{viewScope.user.username}">
								</p:inputText> <p:outputLabel value="Username" />
							</span>
						</div>
						<div class="ui-g-12" style="text-align: left;">
							<span class="md-inputfield"> <p:inputText id="email"
									required="true" label="email" value="#{viewScope.user.email}">
								</p:inputText> <p:outputLabel value="Email" />
							</span>
						</div>
						<div class="ui-g-12" style="text-align: left;">
							<span class="md-inputfield"> <p:password id="password"
									required="true" label="password" inline="true"
									value="#{viewScope.user.plainPassword}" feedback="true"
									promptLabel="input password" weakLabel="Weak" goodLabel="Good"
									strongLabel="Strong" /> <p:outputLabel value="Password" />
							</span>
						</div>
						<!-- <div class="ui-g-12" style="text-align: left;">
							<span class="md-inputfield"> <p:inputText id="mobile"
									required="true" label="mobile" value="#{viewScope.user.mobile}" />
								<p:outputLabel value="Mobile" />
							</span>
						</div>
						<div class="ui-g-12" style="text-align: left; padding: 0px">
							<div class="ui-g">
								<div class="ui-g-8">
									<span class="md-inputfield"> <p:inputText id="captcha"
											required="true" label="captcha" value="#{captcha}" /> <p:outputLabel
											value="Captcha" />
									</span>
								</div>
								<div class="ui-g-4">
									<p:commandButton id="captcha_btn" widgetVar="captcha_btn"
										value="Send" styleClass="secondary-button"
										style="display:block" onclick="Register.getCaptcha()"
										process="@none" immediate="true" />
									<p:remoteCommand name="sendCaptcha"
										actionListener="#{controller.sendCaptcha}" />
								</div>
							</div>
						</div> -->
						<div class="ui-g-12 ">
							<p:commandButton process="@form" update="@form"
								actionListener="#{controller.onRegister}"
								value="create an account" oncomplete="checkEmpty()" />
						</div>
						<div class="ui-g-12">
							<p:separator />
							<p:outputPanel style="display:black">
						Had account 
							<p:link style="display:black" href="#{contextPath}/login"
									value="Sign In" /> now.
						</p:outputPanel>
						</div>
					</p:outputPanel>
					<p:outputPanel id="result_plane" class="ui-g"
						rendered="#{viewScope.user.id != null}">
						<div class="ui-g-12 ui-sm-6 ui-md-6" style="text-align: left;">
							<i class="fa fa-fw fa-check logo"></i>
						</div>
						<div class="ui-g-12 ui-sm-6 ui-md-6" style="text-align: right;">
							<h2 class="welcome-text">Congratulation</h2>
							<span class="guest-sign-in">Registered Successfully</span>
						</div>
						<div class="ui-g-12 " style="text-align: center;">
							Your can used account "
							<h:outputText style="color: #52c41a;"
								value="#{viewScope.user.username}" />
							" or email "
							<h:outputText style="color: #52c41a;"
								value="#{viewScope.user.email}" />
							" , After 5 seconds go to
							<p:link style="display:black" href="#{contextPath}/login"
								value="Sign In" />
						</div>
						<div class="ui-g-12">
							<p:separator />
							<p:outputPanel style="display:black">
						Had account 
							<p:link style="display:black" href="#{contextPath}/login"
									value="Sign In" /> now.
						</p:outputPanel>
						</div>
					</p:outputPanel>
				</div>
			</h:form>
		</div>
	</div>
</h:body>
</html>